import React, { Component } from 'react'
import './index.css'

export default class Parent extends Component {
  render() {
    return (
      <div className='parent'>
        <h2>父亲组件</h2>
        <A render={(data) => <B name={data} />} />
      </div>
    )
  }
}

class A extends Component {
  state = {
    name: 'mal'
  }
  render() {
    return (
      <div className='a'>
        <h2>A组件</h2>
        {/* 这里就像是vue中预留的插槽一般 */}
        {this.props.render(this.state.name)}
      </div>
    )
  }
}

class B extends Component {
  render() {
    return (
      <div className='b'>
        <h2>B组件</h2>
        <p>我是A组件传递过来的姓名: {this.props.name}</p>
      </div>
    )
  }
}
